<template>
  <van-popup
    v-model="showRatePopup"
    position="bottom"
    @close="closeRatePopup"
    class="popDiv"
  >
    <div>
      <div class="headDiv">
        <img :src="closeimg" @click="closeRatePopup" class="img" />
        <div class="title" v-show="!isSubmit">评价</div>
        <div class="title" v-show="isSubmit">已评价</div>

        <div class="rateContentDiv" v-show="!isSubmit">
          <div class="subTitle">星级评价</div>
          <van-rate v-model="value" class="rate" gutter="1rem" size="1.5rem" :icon="rateSelect" :void-icon="rateUnselect">

          </van-rate>
          <div class="tagContainerDiv">
            <div :class="{tagDiv:true,tagSecectDiv:isSelect(i)}" v-for="(item , i) in tagList" @click="tagClick(i)">
              {{item.content}}
            </div>
          </div>
          <div class="subTitle">备注</div>
          <textarea
            placeholder="请简要描述，限制50字以内"
            v-model="content"
            maxlength="50"
          ></textarea>
          <van-button class="button" @click="submitClick">提交</van-button>
        </div>

        <div class="rateContentDiv" v-show="isSubmit">
          <img :src="submitsuccess" class="submitSuccessImg" />
          <div class="submitTitle">感谢反馈，有您的帮助我们会做得更好</div>
        </div>
      </div>
      <!--<div class="bottomDiv"></div>-->
    </div>
  </van-popup>
</template>

<script>
import { api_orderEvaluation } from "@/service/api/repair";

export default {
  name: "RatePopup",
  data() {
    return {
      showKeyboard: true,
        rateSelect: require("@/images/icon/order/rateselect.png"),
        rateUnselect: require("@/images/icon/order/rateunselect.png"),

        closeimg: require("@/images/icon/login/delete.png"),
      submitsuccess: require("@/images/icon/order/submit_success.png"),
      number: "",
      value: 0,
      content: "",
      isSubmit: false,
      tagList: [
        {
          content: "态度好",
          isCheck: false
        },
        {
          content: "服务棒",
          isCheck: false
        },
        {
          content: "认真负责",
          isCheck: false
        }
      ]
    };
  },
  methods: {
    submitClick() {
var tags ='';

for (var i = 0;i < this.tagList.length ; i++){
    var item =  this.tagList[i];
    if (item.isCheck){
        if (tags === ''){
            tags = item.content;
        } else {
            tags = tags + ',' +item.content;
        }
    }
}




      if (this.value < 1) {
        this.$toast("请选择分数");
        return;
      }
      var data = {
        orderId: this.orderid,
        score: this.value,
        evaluation: this.content,
          tags:tags
      };

      this.$toast.loading();
      api_orderEvaluation(data)
        .then(res => {
          this.$toast.clear();
          this.isSubmit = true;
          this.submitSuccess();
        })
        .catch(error => {
          this.$toast.clear();
          this.$toast(error.message);
        });
    },
      tagClick(i){
        var item = this.tagList[i];
        item.isCheck = !item.isCheck;
      },

      isSelect(i){
          var item = this.tagList[i];
          return item.isCheck;
      },

  },
  props: {
    showRatePopup: Boolean,
    closeRatePopup: Function,
    submitSuccess: Function,
    orderid: String
  }
};
</script>

<style scoped>
.popDiv {
  /*padding:1.3333333333333333rem;*/
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.headDiv {
  position: relative;
  margin-top: 1.3333333333333333rem;
  margin-left: 2.9rem;
  margin-right: 2.9rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.bottomDiv{
  border-top: 1px solid #f0f1f5;
  height: 5rem;
}

.rateContentDiv {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rate {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}
.title {
  height: 1.5rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}
.subTitle {
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2333333333333334rem;
  width: 100%;
  text-align: center;
}
.img {
  position: absolute;
  top: 0;
  left: -1.5rem;
  height: 1rem;
  width: 1rem;
}

textarea {
  width: 100%;
  /*text-align: center;*/
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  height: 4.666666666666667rem;
  border: 0.5px solid #f0f1f5;

  padding: 0.43333333333333335rem 0.7666666666666667rem;
  margin: 0.7333333333333333rem 0;

  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

textarea::-webkit-input-placeholder {
  color: #bfc3cd;
}
textarea::-moz-placeholder {
  color: #bfc3cd;
}
textarea::-ms-input-placeholder {
  color: #bfc3cd;
}
.button {
  width: 100%;
  background: rgba(57, 123, 230, 1);
  border-radius: 1.6333333333333333rem;
  color: white;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
}
.submitSuccessImg {
  margin-top: 3.7rem;
  width: 3.3333333333333335rem;
  height: 3.3333333333333335rem;
}
.submitTitle {
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.2333333333333334rem;
  margin-bottom: 3rem;
  margin-top: 1.5rem;
}

.tagContainerDiv{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 1.3rem;
}

.tagDiv{
  width:5.666666666666667rem;
  height:2.1333333333333333rem;
  border-radius:1.6333333333333333rem;
  border:1px solid rgba(191,195,205,1);
  text-align: center;
  line-height: 2.1333333333333333rem;
  color:rgba(122,132,145,1);
  font-size: 0.9rem;
}
  .tagSecectDiv{
    background:rgba(57,123,230,1);
    color:white;
    border:0px solid rgba(191,195,205,1);
    font-size: 0.9rem;

  }

</style>
